<template>
  <div class="app-container children">
    <el-tabs v-model="activeName" type="card" @tab-remove="removeTab" @tab-click="clickTab">
      <el-tab-pane label="盘点计划" name="1">
        <template v-if="activeName === '1'">
          <List @showAddtwo="showAddtwo" @handleUpdate="handlequit" @handleOpen="handleOpen"></List>
        </template>
      </el-tab-pane>
      <el-tab-pane :label="title" name="2" closable v-if="showObjtwo.tabIndex">
        <!-- <template v-if="activeName === '2'"> -->
        <Addmodification ref="refupdate" @Chlidren="clonetwo">
        </Addmodification>
        <!-- </template> -->
      </el-tab-pane>
      <el-tab-pane label="新增任务" name="3" :closable="showObjthree.closable" v-if="showObjthree.tabIndex">
        <template v-if="activeName === '3'">
          <CreatedTasks :planId="showObjthree.rowObj" @handleSubmit="handleSubmit" @handlequit="handlequit"
            @handlereplace="handlereplace">
          </CreatedTasks>
        </template>
      </el-tab-pane>
      <el-tab-pane label="计划详情" name="5" :closable="showObjefive.closable" v-if="showObjefive.tabIndex">
        <template v-if="activeName === '5'">
          <CationChildren :rowObj="showObjefive.rowObj" @handleChildren="handleChildren"></CationChildren>
        </template>
      </el-tab-pane>
      <el-tab-pane label="任务详情" name="4" closable v-if="showObjfour.tabIndex">
        <template v-if="activeName === '4'">
          <Carefulness :rowObj="showObjfour.rowObj"></Carefulness>
        </template>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "plan",
  // dicts: ['sys_notice_status', 'sys_notice_type'],
  components: {
    List: () => import('./list/index.vue'),//列表
    Addmodification: () => import('./plancomponents/addmodification.vue'),//新增列表
    CreatedTasks: () => import('./plancomponents/Chlidren/createdTasks.vue'),//新增任务
    Carefulness: () => import('./plancomponents/Chlidren/carefulness.vue'),//任务详情
    CationChildren: () => import('./list/form/cationChildren.vue'),//任务详情
  },
  data () {
    return {
      activeName: '1',
      tabIndex: false,
      title: '新增计划',
      showObjtwo: {
        tabIndex: false,
        rowObj: {}
      },
      showObjthree: {
        tabIndex: false,
        rowObj: undefined,
        closable: true
      },
      showObjfour: {
        tabIndex: false,
        rowObj: undefined
      },
      showObjefive: {
        tabIndex: false,
        rowObj: undefined,
        closable: true
      },
      timeOut: undefined
    };
  },
  created () {
  },
  destroyed () {//清除定时器
    clearTimeout(this.timeOut)
  },
  watch: {
    'showObjfour.tabIndex' (val) {
      if (val) {//监听，为任务详情时，不可关闭其他按钮
        this.showObjthree.closable = false
        this.showObjefive.closable = false
      } else {
        this.showObjthree.closable = true
        this.showObjefive.closable = true
      }
    }
  },
  methods: {
    /**
     * 计划详情
     */
    handleOpen (row) {
      this.showObjefive.tabIndex = true
      this.showObjefive.rowObj = row
      this.activeName = '5'
    },
    /**
     * 任务详情
     * @param {计划详情} row 
     */
    handleChildren (row) {
      this.activeName = '4'
      this.showObjfour.tabIndex = true
      this.showObjfour.rowObj = row
    },
    clickTab () {
      if (this.activeName === '1') {
        this.showObjtwo.tabIndex = false
        this.showObjthree.tabIndex = false
        this.showObjfour.tabIndex = false
        this.showObjefive.tabIndex = false
      }
    },
    /**
     * 关闭
     */
    removeTab () {
      switch (this.activeName) {
        case '2':
          this.showObjtwo.tabIndex = false
          break;
        case '3':
          if (this.showObjfour.tabIndex) {
            this.showObjfour.tabIndex = false
            return
          } else {
            this.showObjthree.tabIndex = false
          }
          break;
        case '4':
          if (this.showObjefive.tabIndex) {
            this.showObjefive.tabIndex = true
            this.showObjfour.tabIndex = false
            this.activeName = '5'
            return
          } else {
            this.showObjfour.tabIndex = false
            this.showObjthree.tabIndex = true
            this.activeName = '3'
            return
          }
        case '5':
          if (this.showObjfour.tabIndex) {
            this.showObjfour.tabIndex = false
            return
          } else {
            this.showObjefive.tabIndex = false
          }
          break;
      }
      this.activeName = '1'
    },
    /**任务提交 */
    handleSubmit () {
      this.activeName = '1'
      this.showObjthree.tabIndex = false
      this.showObjfour.tabIndex = false
    },
    showAddtwo () {//新增计划
      this.title = '新增计划'
      this.showObjtwo.tabIndex = true
      this.activeName = '2'
    },
    clonetwo (row) {
      this.activeName = '3'
      this.showObjthree.rowObj = row
      this.showObjtwo.tabIndex = false
      this.showObjthree.tabIndex = true
    },
    handlequit (planId) {
      this.title = '修改计划'
      this.activeName = '2'
      this.showObjtwo.tabIndex = true
      this.showObjthree.tabIndex = false
      this.$nextTick(() => {
        this.timeOut = setTimeout(() => {
          this.$refs.refupdate.updateIP({ 'planId': planId })
        }, 100)

      })

    },
    /**任务详情 */
    handlereplace (row) {
      this.activeName = '4'
      this.showObjfour.tabIndex = true
      this.showObjfour.rowObj = row
      // this.showObjthree.tabIndex = false
    }
    // addTab(row){
    //   this.tabIndex = true
    //   this.activeName = '3'
    //   this.rowObj = row
    // }
  }
};
</script>
